AMP Lightbox এবং Modal Dialogs (amp-lightbox) হল AMP (Accelerated Mobile Pages) এর একটি উপাদান যা ওয়েব পেজে ইন্টারেক্টিভ এবং গ্রাফিকাল উপাদান প্রদর্শন করতে সাহায্য করে, যেমন ছবি, ভিডিও, বা কনটেন্ট যা একে অন্যের উপরে "ওভারলে" (overlay) হিসাবে প্রদর্শিত হয়। এটি বিশেষভাবে মোবাইল ডিভাইসে সঠিকভাবে কাজ করার জন্য ডিজাইন করা হয়েছে, যাতে পেজের লোডিং সময় এবং পারফরম্যান্সে কোনো সমস্যা না হয়।
AMP Lightbox এবং Modal Dialogs (amp-lightbox)
amp-lightbox হল AMP এর একটি কম্পোনেন্ট যা মোবাইল ডিভাইসে আলোচিত বা ছবি, ভিডিও বা অন্য যেকোনো কনটেন্টকে পূর্ণ পর্দায় প্রদর্শন করতে সাহায্য করে। এই উপাদানটি "lightbox" অথবা "modal dialogs" হিসাবে কাজ করে। আপনি এটি ব্যবহার করে পেজের মূল কন্টেন্টের ওপর একটি পপ-আপ উইন্ডো তৈরি করতে পারেন, যাতে ব্যবহারকারীরা আরো বিশদ তথ্য দেখতে পারে বা কোনো নির্দিষ্ট কনটেন্ট এক্সপ্লোর করতে পারে।
amp-lightbox কম্পোনেন্টের ব্যবহার
AMP Lightbox একটি AMP কম্পোনেন্ট যা ছবির লাইটবক্স, ভিডিও, বা অন্যান্য মিডিয়া কনটেন্টকে একটি পপ-আপ মোডে প্রদর্শন করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি ব্যবহারকারীদের জন্য আরও মজার এবং ইনটারেক্টিভ অভিজ্ঞতা তৈরি করতে পারবেন।
AMP Lightbox এর মূল বৈশিষ্ট্য:
- এটোমেটিক সাইজিং এবং স্কেলিং: লাইটবক্সটি নিজে থেকেই স্কেল হয়, এবং ব্যবহারকারীর স্ক্রীনের আকার অনুযায়ী সাইজ তৈরি করে।
- মোবাইল-ফ্রেন্ডলি: এটি মোবাইল ডিভাইসে সম্পূর্ণ অপ্টিমাইজড এবং পারফরম্যান্সে কোনো ক্ষতি ছাড়াই কাজ করে।
- সহজ ইনস্টলেশন: এটি খুবই সহজভাবে AMP HTML এর মধ্যে ইনস্টল করা যায় এবং কোনো অতিরিক্ত কোডিং করার দরকার হয় না।
- এনিমেশন এবং ট্রানজিশন: লাইটবক্স ওপেন বা ক্লোজ হওয়ার সময় সুন্দর এনিমেশন এবং ট্রানজিশন দেখানো যায়, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
amp-lightbox কম্পোনেন্ট কিভাবে ব্যবহার করবেন?
১. প্রথমে AMP কম্পোনেন্ট ইমপোর্ট করুন:
আপনার AMP পেজের <head> সেকশনে amp-lightbox কম্পোনেন্টটি যোগ করতে হবে। এই কম্পোনেন্টটি AMP লাইব্রেরির অংশ, তাই আপনাকে AMP লাইব্রেরি ইমপোর্ট করতে হবে।
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
</head>২. AMP Lightbox উপাদান তৈরি করুন:
এখন আপনি লাইটবক্স উপাদানটি ব্যবহার করতে পারবেন। এর জন্য amp-lightbox ট্যাগ ব্যবহার করুন এবং আপনার কনটেন্টের জন্য হোস্টিং উপাদানটি সাজান।
<amp-lightbox id="lightbox1" layout="nodisplay">
<div class="lightbox-content">
<p>এখানে আপনি ছবি বা ভিডিও যোগ করতে পারেন</p>
<img src="your-image.jpg" alt="Lightbox Image">
</div>
</amp-lightbox>এখানে layout="nodisplay" ব্যবহার করা হয়েছে, যাতে এটি সরাসরি প্রদর্শিত না হয়। এটি তখনই দৃশ্যমান হবে যখন আমরা কোনো ইন্টারঅ্যাকশনের মাধ্যমে এটি ট্রিগার করব।
৩. Lightbox Trigger বা Button তৈরি করুন:
এখন আপনি একটি বাটন বা লিংক তৈরি করতে পারেন, যা ব্যবহারকারী ক্লিক করলে লাইটবক্সটি দেখাবে। এর জন্য amp-bind ব্যবহার করতে পারেন, অথবা শুধু AMP এর সাধারণ on="tap: ইভেন্ট হ্যান্ডলার ব্যবহার করে লাইটবক্সটিকে সক্রিয় করতে পারেন।
<button on="tap:lightbox1.toggleVisibility()">লাইটবক্স দেখুন</button>এখানে on="tap:lightbox1.toggleVisibility()" দিয়ে আমরা একটি ইভেন্ট ট্রিগার করছি, যা lightbox1 এর ভিজিবিলিটি পরিবর্তন করবে।
AMP Lightbox এর বৈশিষ্ট্যগুলির কিছু উদাহরণ
ইমেজ লাইটবক্স:
- আপনি একটি ছবির লাইটবক্স তৈরি করতে পারেন, যা ক্লিক করার পর পূর্ণ স্ক্রীনে দেখা যাবে।
<amp-lightbox id="image-lightbox" layout="nodisplay"> <div class="lightbox-content"> <img src="image.jpg" alt="Full Screen Image"> </div> </amp-lightbox> <button on="tap:image-lightbox.toggleVisibility()">ইমেজ দেখুন</button>ভিডিও লাইটবক্স:
- আপনি একটি ভিডিও লাইটবক্সও তৈরি করতে পারেন, যেখানে ক্লিক করার পর ভিডিও প্লে হবে।
<amp-lightbox id="video-lightbox" layout="nodisplay"> <div class="lightbox-content"> <amp-video src="video.mp4" width="640" height="360" layout="responsive" controls></amp-video> </div> </amp-lightbox> <button on="tap:video-lightbox.toggleVisibility()">ভিডিও দেখুন</button>টেক্সট ও অন্যান্য কনটেন্ট:
- আপনি শুধু টেক্সট বা অন্যান্য কনটেন্টও লাইটবক্সে প্রদর্শন করতে পারেন, যা সাধারণত ব্যবহৃত হয় ফর্ম বা টুলটিপ হিসাবে।
<amp-lightbox id="info-lightbox" layout="nodisplay"> <div class="lightbox-content"> <p>এই লাইটবক্সে আপনি কোন তথ্য বা বার্তা প্রদর্শন করতে পারেন।</p> </div> </amp-lightbox> <button on="tap:info-lightbox.toggleVisibility()">তথ্য দেখুন</button>
AMP Lightbox এর সুবিধা
- দ্রুত লোডিং: AMP Lightbox মোবাইল ডিভাইসে দ্রুত লোড হয়, কারণ এটি AMP ফ্রেমওয়ার্কের অংশ এবং পারফরম্যান্স অপ্টিমাইজড থাকে।
- মোবাইল-ফ্রেন্ডলি: এটি বিশেষভাবে মোবাইল ডিভাইসে অপ্টিমাইজড, যা মোবাইল ব্যবহারকারীদের জন্য উপকারী।
- সহজ ইনস্টলেশন এবং ব্যবহার: কোডের মধ্যে সহজেই AMP Lightbox ট্যাগ ব্যবহার করা যায় এবং এটি অত্যন্ত ইন্টারেক্টিভ।
- ব্যবহারকারী অভিজ্ঞতা উন্নয়ন: এটি সুন্দর এবং স্মুথ এনিমেশনসহ কনটেন্ট প্রদর্শন করতে সাহায্য করে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
এভাবে amp-lightbox কম্পোনেন্ট ব্যবহার করে আপনি AMP পেজে ইন্টারেক্টিভ, দ্রুত এবং মোবাইল ফ্রেন্ডলি লাইটবক্স এবং মডাল ডায়ালগ তৈরি করতে পারেন।
Read more
